<template>
  <div class="popup-cpt">
    <van-popup
      v-model:show="showPop"
      position="right"
      :duration="popDuration"
      teleport="body"
      :class="{ 'pop-disabled-transform': disabledTransform }"
      :style="{ width: '100%', height: '100%' }"
    >
      <slot name="default"></slot>
    </van-popup>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  props: {},
  setup() {
    let showPop = ref(false)
    let popDuration = ref(0.2)
    let disabledTransform = ref(false) // 是否禁用弹出框的transform（因为影响到position:sticky的功能）
    return {
      showPop,
      popDuration,
      disabledTransform,
      show() {
        showPop.value = true
        setTimeout(() => {
          disabledTransform.value = true
          popDuration.value = 0
        }, 200)
      },
      close() {
        showPop.value = false
        setTimeout(() => {
          disabledTransform.value = false
          popDuration.value = 0.2
        }, 300)
      },
    }
  },
})
</script>

<style lang="less">
.pop-disabled-transform {
  transform: none !important;
  top: 0 !important;
  transition: none !important;
}
</style>
